<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>BookChart</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui/layui.js" charset="UTF-8"></script>
</head>
<body>
<div class="layui-collapse">
<%--    <form class="layui-form" lay-filter="formTest">--%>
<%--        <div class="layui-colla-item">--%>
<%--            <h2 class="layui-colla-title">搜索</h2>--%>
<%--            <div class="layui-colla-content layui-show">--%>
<%--                <label class="layui-form-label" style="width: 30%">日期范围:</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="text" class="layui-input" name="cpdate" id="test10" placeholder=" 请选择时间 " style="width: 300px">--%>
<%--                </div>--%>

<%--                <div class="layui-input-inline">--%>
<%--                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn" style="margin-left: 6px;">立即查询</button>--%>
<%--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </form>--%>

    <div class="layui-colla-item">
        <h2 class="layui-colla-title">图书出版社以及类别销售排行</h2>
        <div class="layui-colla-content layui-show" style="width: 96%;height:50%;">
            <div id="box1" style="width: 40%;height:100%;float: left;margin-left: 5%"></div>
            <div id="box2" style="width: 40%;height:100%;float: left;margin-left: 10%"></div>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">图书销售排行</h2>
        <div class="layui-colla-content layui-show" style="width: 96%;height:70%;">
            <div id="box3" style="height: 100%;width:100%;float: left;margin-left: 1%"></div>
        </div>
    </div>
</div>
</body>
<script>
    //js方式获取本地时间+1天
    Date.prototype.toLocaleStringTomorrow = function() {
        var dateTime=new Date();
        dateTime=dateTime.setDate(dateTime.getDate()+1);
        dateTime=new Date(dateTime);
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = dateTime.getDate();
        d = d<10?("0"+d):d;
        return y+"-"+m+"-"+d;
    }

    layui.use(['laydate','layer','jquery','element'],function () {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;
        var tomorrowTime = (new Date()).toLocaleStringTomorrow();

        //日期选择器
        var value1;
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        //根据时间查询
        $("#serachBtn").on("click",function () {
            if (value1 == "" || value1 == undefined){
                value1 = "";
            }

            showChartOne();
            showChartTwo();
            showChartThree();

        });

        $(function () {
            value1="";
            showChartTwo();
            showChartOne();
            showChartThree();
        })

        var show;
        function tip(a,str) {
            //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
            if(a.length===0){
                show=str;
            }else {
                show='';
            }
        }


        //统计图一
        function  showChartOne(){
            var chartDom = document.getElementById('box1');
            var myChart = echarts.init(chartDom);
            var option;

            option && myChart.setOption(option);
            /*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url:"${pageContext.request.contextPath}/statisc/tu1",    //请求发送到TestServlet处
                dataType:"json",
                success : function(result) {
                    tip(result,"您查询的时间范围内暂无图书出版社销售数据");
                    myChart.setOption({        //填入数据
                        title:{
                            subtext:show,
                            text: '图书出版社销售排行',
                            left:'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: ' {a} <br> {b} :{c} ({b}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            top: '5%',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '面积占比',
                                type: 'pie',
                                radius: ['20%', '60%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2,
                                    left:'left'
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data:result
                            }
                        ]
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("图书出版社图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };
        //统计图二
        function showChartTwo(){
            var chartDom = document.getElementById('box2');
            var myChart = echarts.init(chartDom);
            var option;

            option && myChart.setOption(option);
            /*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url:"${pageContext.request.contextPath}/statisc/tu2",    //请求发送到TestServlet处
                dataType:"json",
                success : function(result) {
                    tip(result,"您查询的时间范围内暂无图书出版社销售数据");
                    myChart.setOption({        //填入数据
                        title:{
                            subtext:show,
                            text: '图书类别销售排行',
                            left:'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: ' {a} <br> {b} :{c} ({b}%)',
                        },
                        legend: {
                            orient: 'vertical',
                            top: '5%',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '面积占比',
                                type: 'pie',
                                radius: ['20%', '60%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2,
                                    left:'left'
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data:result
                            }
                        ]
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("图书出版社图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });
        }
        //统计图三柱状图
        function  showChartThree(){
            var chartDom = document.getElementById('box3');
            var myChart = echarts.init(chartDom);
            var option;

            option && myChart.setOption(option);
            /*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url:"${pageContext.request.contextPath}/statisc/tu3",    //请求发送到TestServlet处
                dataType:"json",
                success : function(result) {
                    tip(result,"您查询的时间范围内暂无图书出版社销售数据");
                    myChart.setOption({
                        dataset: [
                            {
                                dimensions: ['name', 'value'],
                                source: result
                            },
                            {
                                transform: {
                                    type: 'sort',
                                    config: { dimension: 'value', order: 'desc' }
                                }
                            }
                        ],
                        xAxis: {
                            type: 'category',
                            axisLabel: { interval: 0, rotate: 30 }
                        },
                        yAxis: {},
                        series: {
                            type: 'bar',
                            encode: { x: 'name', y: 'value' },
                            datasetIndex: 1
                        }
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("图书出版社图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };

    });
</script>
</html>
